<!-- 改进后的LoginForm.vue -->
<template>
  <el-form
    :model="loginForm"
    :rules="loginRules"
    ref="loginFormRef"
    @keyup.enter="handleLogin"
    class="auth-form"
  >
    <div class="form-header">
      <h1>欢迎回来～</h1>
      <p>请登陆！</p>
    </div>

    <el-form-item prop="account">
      <el-input
        v-model="loginForm.account"
        placeholder="用户名"
        :prefix-icon="User"
        clearable
        autofocus
      />
    </el-form-item>

    <el-form-item prop="password">
      <el-input
        v-model="loginForm.password"
        placeholder="密码"
        :prefix-icon="Lock"
        :type="showPassword ? 'text' : 'password'"
        clearable
      >
        <template #suffix>
          <el-icon @click="showPassword = !showPassword" class="cursor-pointer">
            <View v-if="showPassword" />
            <Hide v-else />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>

    <el-button
      type="primary"
      :loading="loading"
      @click="handleLogin"
      class="submit-btn"
    >
      登 录
    </el-button>

    <div class="form-footer">
      <el-link type="info" @click="$emit('switch-form')">
        没有账号？立即注册
      </el-link>
      <!-- <el-link type="primary" class="ml-4">忘记密码？</el-link> -->
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { User, Lock, View, Hide } from "@element-plus/icons-vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { cloneDeep } from "lodash";
import { login } from "@/api/user-app";
import { useAppStoreWithOut } from "@/store/modules/app";
import router from "@/router";
import { saveStorage } from "@/utils/storage/storage";
import { encrypt } from "@/utils";
const store = useAppStoreWithOut();
interface LoginForm {
  account: string;
  password: string;
}

const loginForm = reactive<LoginForm>({
  account: "",
  password: "",
});

const loginFormRef = ref<FormInstance>();
const showPassword = ref(false);
const loading = ref(false);

const loginRules = reactive<FormRules<LoginForm>>({
  account: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 16, message: "长度在3到16个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在6到16个字符", trigger: "blur" },
  ],
});

const handleLogin = async () => {
  try {
    loading.value = true;
    await loginFormRef.value?.validate();
    const data = cloneDeep(loginForm);
     const p = encrypt(data.password);
    if (p) {
      data.password = p;
    } else {
      ElMessage.error("注册错误");
      return;
    }
    // 模拟API调用
    const res = await login<{ token: string }>(data);
    store.setToken(res.token);
    saveStorage("token",res.token)
    router.push("/");
    ElMessage.success("登录成功");
    // showSuccess('登录成功')
    // 实际项目中这里进行路由跳转
  } catch (error) {
    // showError('登录失败，请检查用户名和密码')
  } finally {
    loading.value = false;
  }
};

// 自动聚焦用户名输入框
onMounted(() => {
  loginFormRef.value?.validateField("account");
});
</script>

<style scoped>
.auth-form {
  width: 380px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.form-header {
  text-align: center;
  margin-bottom: 40px;

  h1 {
    font-size: 24px;
    color: #303133;
    margin-bottom: 8px;
  }

  p {
    color: #909399;
    font-size: 14px;
  }
}

.submit-btn {
  width: 100%;
  height: 44px;
  margin-top: 10px;
  letter-spacing: 2px;
}

.form-footer {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  padding: 0 15px;

  .el-input__inner {
    height: 44px;
  }
}
</style>
